<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>promise</title>
  </head>
  <body>
    <script>
      /*
        1. 思路
          - promise是什么
          - promise有什么特点：三个状态
          - promise怎么产生，细节
          - promise实例对象上的方法（原型上的方法）
          - Promise构造函数上静态方法

        promise是一个异步编程解决方案之一，用来解决异步回调地狱问题。

        promise内部有三个状态：pending（初始化状态）、fulfilled（成功状态）、rejected（失败状态）
        初始化promise是初始化状态，调用resolve方法改为成功状态，调用reject方法改为失败状态
        注意：状态只能改变一次，后面就无效了

        new Promise()会生成promise实例对象，传入一个回调函数作为参数，回调函数有接收resolve、reject两个参数
        它们用来改变promise对象状态的

        promise实例对象上可以使用三个方法：then、catch、finally
        当promise对象变成成功状态，触发then第一个回调
        当promise对象变成失败状态，触发catch第一个回调
        当promise对象不管变成成功还是失败状态，都会触发finally第一个回调

        三个方法：then、catch、finally都返回一个promise对象，所以promise可以链式调用
        返回的promise状态：
          如果报错了，返回失败状态
          如果内部返回了promise，就看这个promise的状态
          如果没有发生上述情况，返回成功状态

          async&await 和 try&catch

        Promise构造函数静态方法：
          Promise.resolve()  一般返回一个成功的promise，也有可能返回失败的promise
          Promise.reject()   一定返回一个失败的promise
            二次封装axios，响应拦截器使用了  Promise.reject()
          Promise.all([]) 所有promise对象成功才成功，只要有一个失败就失败
          Promise.allSettled() 不管成功或失败都能得到结果，成功得到成功结果，失败得到失败的原因
            同时发送多个请求，可以使用all或allSettled
          Promise.race()  返回第一个状态发生变化的promise（不管成功/失败）
            对某个请求做一个超时限制

        
        需求1：先请求a、再请求b、最后请求c，怎么做？
          async
            await a()
            await b()
            await c()
        
        需求2：同时请求a、b、c，怎么做？
          Promise.all([a, b, c])

        需求3：Promise.all 一旦有一个失败了，就全失败了
          const result = await Promise.allSettled([a, b, c])
          result.filter(item => item.status === 'fulfilled')
      */

      const p = new Promise((resolve, reject) => {
        console.log(1);
        resolve();
      });

      p.then(() => {
        console.log(2);
      })
        .catch(() => {
          console.log(3);
        })
        .then(() => {
          console.log(4);
          console.log(a);
        })
        .catch(() => {
          console.log(5);
          return new Promise((resolve, reject) => {
            reject();
          });
        })
        .then(() => {
          console.log(6);
        })
        .catch(() => {
          console.log(7);
        });

      // // 发送请求
      // const p1 = new Promise((resolve) => {
      //   setTimeout(() => {
      //     resolve("请求成功了");
      //   }, 11000);
      // });

      // // 超时时间：10s
      // const p2 = new Promise((resolve, reject) => {
      //   setTimeout(() => {
      //     reject();
      //   }, 10000);
      // });

      // Promise.race([p1, p2]);
    </script>
  </body>
</html>
